<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <text class="back-button" @click="goBack">←</text>
      <text class="header-title">预约详情</text>
    </view>
    
    <!-- 二维码区域 -->
    <view class="qr-section">
      <text class="machine-id">核销码：WE343225V</text>
      <view class="qr-code">
        <!-- 使用uni-app的二维码组件 -->
        <!-- <canvas canvas-id="qrcode" style="width: 200px; height: 200px;"/> -->
		<image src="@/static/c9.png" style="width: 200px; height: 200px;"></image>
      </view>
    </view>
    
    <!-- 维修信息卡片 -->
    <view class="info-card">
      <view class="card-title">维修信息</view>
      <view class="info-item">
        <text class="info-label">维修单号：</text>
        <text class="info-value">3343252</text>
      </view>
      <view class="info-item">
        <text class="info-label">维修状态：</text>
        <text class="info-value">进行中</text>
      </view>
      <view class="info-item">
        <text class="info-label">车主姓名：</text>
        <text class="info-value">张三</text>
      </view>
      <view class="info-item">
        <text class="info-label">联系方式：</text>
        <text class="info-value">13912345678</text>
      </view>
      <view class="info-item">
        <text class="info-label">维修方式：</text>
        <text class="info-value">上门维修</text>
      </view>
      <view class="info-item">
        <text class="info-label">服务地址：</text>
        <text class="info-value">山西路32号</text>
      </view>
      <view class="info-item">
        <text class="info-label">预约日期：</text>
        <text class="info-value">2022/11/10 11:00</text>
      </view>
    </view>
    
    <!-- 车辆信息卡片 -->
    <view class="info-card">
      <view class="card-title">车辆信息</view>
      <view class="info-item">
        <text class="info-label">车辆类型：</text>
        <text class="info-value">大黄蜂</text>
      </view>
      <view class="info-item">
        <text class="info-label">车牌号：</text>
        <text class="info-value">粤A5323</text>
      </view>
    </view>
  </view>
</template>

<script>
// import QRCode from '@/utils/weapp-qrcode.js' // 需要引入二维码生成库

export default {
  data() {
    return {
      repairInfo: {
        code: 'WE343225V',
        orderNo: '3343252',
        status: '进行中',
        name: '张三',
        phone: '13912345678',
        type: '上门维修',
        address: '山西路32号',
        appointTime: '2022/11/10 11:00',
        vehicleType: '大黄蜂',
        plateNo: '粤A5323'
      }
    }
  },
  // onReady() {
  //   this.generateQRCode()
  // },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    // generateQRCode() {
    //   new QRCode('qrcode', {
    //     text: this.repairInfo.code,
    //     width: 200,
    //     height: 200,
    //     colorDark: "#000000",
    //     colorLight: "#ffffff"
    //   })
    // }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  background-color: #1989fa;
  color: #ffffff;
  padding: 30rpx;
  position: relative;
  
  .back-button {
    position: absolute;
    left: 30rpx;
  }
  
  .header-title {
    text-align: center;
    font-size: 36rpx;
  }
}

.qr-section {
  background-color: #ffffff;
  padding: 40rpx;
  text-align: center;
  margin-bottom: 20rpx;
  
  .machine-id {
    color: #666666;
    margin-bottom: 20rpx;
  }
  
  .qr-code {
    width: 400rpx;
    height: 400rpx;
    margin: 0 auto;
    border: 2rpx solid #dddddd;
  }
}

.info-card {
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 16rpx;
  
  .card-title {
    padding: 20rpx;
    border-bottom: 2rpx solid #eeeeee;
    font-weight: bold;
  }
  
  .info-item {
    display: flex;
    padding: 24rpx;
    border-bottom: 2rpx solid #eeeeee;
    
    .info-label {
      color: #666666;
      width: 200rpx;
    }
    
    .info-value {
      flex: 1;
      text-align: right;
      color: #333333;
    }
  }
}
</style> 